<app-sidebar></app-sidebar>
<main class="main">
  <div class="container">
    <h1>Add Admin</h1><br>
    <form [formGroup]="addAdminForm" (ngSubmit)="addAdmin(addAdminForm)">
      <div class="box box-1">
        <label for="">Username : </label>
        <input type="text" formControlName="username">
      </div>
      <div class="box box-2">
        <label for="">Password : </label>
        <input type="password" formControlName="password">
      </div>
      <div class="box box-3">
        <label for="">Phone : </label>
        <input type="text" maxlength="10" formControlName="phone">
      </div><br>
      <div class="box box-4">
        <label for="">Privileges : </label>
        <select name="" id="" formControlName="privileges">
          <option value="1">Admin</option>
          <option value="2">User</option>
        </select>
      </div><br>

      <!-- <button class="btn-add">Add</button> -->
      <span *ngIf="!addAdminForm.valid">
        <button class="btn-add-1" [disabled]="!addAdminForm.valid">
          <i class="fa-solid fa-user-plus"></i> Add </button>
      </span>
      <span *ngIf="addAdminForm.valid">
        <button class="btn-add-2">
          <i class="fa-solid fa-user-plus"></i> Add </button>
      </span>
    </form>
  </div><br>
</main>
<div class="box-table">
<table id="customers">
  <tr>
    <th>Username</th>
    <th>Password</th>
    <th>Phone</th>
    <th>Privileges</th>
  </tr>
  <tr *ngFor="let rows of userList.users">
    <td>{{ rows.username }}</td>
    <td>{{ rows.password }}</td>
    <td>{{ rows.phone }}</td>
    <td id="del">
      {{ rows.accesstoken == 1 ? ' สิทธิ์เป็น ADMIN ': 'สิทธิ์เป็น USER' }}
      <i class="fa-solid fa-pen-to-square" style="color: #5000b3;" [routerLink]="['/admin-page/user/'+rows.user_id+'']"></i>
    </td>
    
</table>
</div>